@extends('layouts.app')

@section('title', 'View Record')

@section('content')
    <div class="container">
        <table class="table table-striped table-hover ">
            <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Sex</th>
                <th>Serial Number</th>
                <th>Images</th>
                <th>Common</th>
                <th>Date</th>
                <th class="text-right">Action</th>
            </tr>
            </thead>
            <tbody>
            @if (!empty($records))
                <div class="col-lg-12">
                    <div class="col-lg-8">
                        {{$records->appends(['q' => $q])->links()}}
                    </div>
                    <div class="col-lg-4" style="margin-top: -20px">
                        <form class="form-group" method="get" action="{{url('/record/view')}}">
                            <label>Search</label>
                            <input class="form-control" value="{{$q or ''}}" name="q" type="text"
                                   placeholder="Input Content" style="padding-right: 55px">
                            <button class="btn pull-right"
                                    type="submit"
                                    style="
                                    margin-top: -28px;
                                    background-color: #f5f8fa;
                                    box-shadow: none;
                                    border-radius: 0;
                                    border: none;
                                    border-left: 1px solid #dddddd;"
                            >
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </FORM>
                    </div>
                </div>
                @foreach($records as $record)
                    <tr>
                        <td>{{$record->id or '0'}}</td>
                        <td><a href="{{url('/record/' . $record->id)}}">{{$record->name or ''}}</a></td>
                        <td>{{$record->sex or ''}}</td>
                        <td>{{$record->serial_number or ''}}</td>
                        <td data-pop="img">
                            @if (!empty($record->images))
                                @foreach(json_decode($record->images) as $image)
                                    <img src="{{ $image }}" width="30px" class="img-rounded">
                                @endforeach
                            @endif
                        </td>
                        <td>{{$record->common or ''}}</td>
                        <td>{{date( 'Y-m-d', strtotime($record->date))}}</td>
                        <td class="text-right">
                            <a class="btn btn-danger glyphicon glyphicon-minus-sign btn-sm"
                               onclick="deleteItem({{$record->id}})"> Delete</a>
                            <a href="{{url('/record/append?id='.$record->id)}}"
                               class="btn btn-primary glyphicon glyphicon-edit btn-sm"> Edit</a>
                        </td>
                    </tr>
                @endforeach
                <tr>
                    <td colspan="8">
                        {{$records->appends(['q' => $q])->links()}}
                    </td>
                </tr>
            @endif
            </tbody>
            <tfoot>
            </tfoot>
        </table>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function () {
            $('*[data-pop=img] > img').click(function () {
                var parent = $(this).parent();
                var listImg = parent.children('img');
                var images = [];
                for (var i = 0; i < listImg.length; i++) {
                    images.push($(listImg[i]).attr('src'));
                }
                var src = $(this).attr('src');
                let html =
                    '<div onclick="closePop(this)" style="width: 100%;height: 100%;position: fixed;background-color: rgba(0, 0, 0, 0.5);text-align: center; top:0; z-index: 1040">' +
                    '<img src="' + src + '" width="80%">' +
                    '</div>';
                $('body').append(html);

            });
        });
        function closePop(el) {
            $(el).remove();
        }
        function deleteItem(id) {
            $.post('/record/delete', {_token: $('meta[name="csrf-token"]').attr('content'), id: id}, function (data) {
                if (data === 'OK') {
                    window.location.reload();
                } else {
                    alert(data);
                }
            });
        }
    </script>
@endsection